<template>
  <div>
    <!-- <el-button size="mini" type="text" @click="gotoRouteHandle">返回</el-button> -->
    <div id="opii" class="mod-detail" v-if="!isDataEdit">
      <!-- 头部 -->
    <div class="mod-isisis">
    <div class="hander-s">
      <div class="in-t">
      <div class="in-ts"></div>
      <h3 class="zhengshuxiangqing">项目详情</h3>
      </div>
      <div class="anniu">
      <el-button type="text" style="color:#6E92E9;" @click="toggleEdit">修改</el-button>
      <i>|</i>
      <el-button type="text" style="color:#6E92E9;" @click="gotoRouteHandle">返回上级</el-button>
      </div>
    </div>
    <!-- 基础信息 -->
    <div class="form-div" ref="dataForme">
     <el-form :model="dataForm" :label-position="labelPosition" ref="dataForm" class="queryFormList">
       <el-row>
         <el-col :span="6">
         <el-form-item label="项目名称：">
         {{dataForm.projectName}}
         </el-form-item>
         </el-col>
         <el-col :span="6">
          <el-form-item label="项目种类：">
          {{dataForm.category}}
         </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="项目编号：">
         {{dataForm.serialNumber}}
         </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="项目状态：">
         {{dataForm.status}}
         </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="项目负责人：">
          {{dataForm.employeeName}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="负责人手机号：">
          {{dataForm.employeeMobile}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="建设单位：">
              {{dataForm.constructCompany}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="项目地址：">
             {{dataForm.address}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="合同开始日期：">
              {{dataForm.contractStartTime}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="合同结束日期：">
              {{dataForm.contractEndTime}}
            </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="实际开始日期：">
             {{dataForm.actualStartTime}}
            </el-form-item>
         </el-col>
          <el-col :span="6">
           <el-form-item label="实际结束日期：">
             {{dataForm.actualEndTime}}
            </el-form-item>
         </el-col>

         <el-col :span="6">
           <el-form-item label="项目金额（万元）：">
            {{dataForm.price}}
            </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="备注：">
              {{dataForm.remark}}
            </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="附件：">

             <div class="div-images" v-for="(item,index) in srcList" :key="index">
             <el-image
               style="width: 60px; height: 60px"
               :src="item"
               @click.stop="handleClickItem"
               :preview-src-list="getSrcList(index)">
             </el-image>
             </div>

            </el-form-item>
         </el-col>
       </el-row>
     </el-form>
    </div>
  </div>

    <div class="title-a">
        <div class="zuofei">
          <div class="in-ts"></div>
        <p>关联证书</p>
        </div>
        <div class="fanhui">
        </div>
      </div>
    <!-- table -->
    <div class="table-is">
    <el-table
      :data="dataList"
      :header-cell-style="{background:'#F5F7FA'}"
      @sort-change='sort_change'
      :max-height="tableHeight"
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        prop="certificateType"
        min-width="70"
        sortable='custom'
        label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.certificateType === 1">
            <el-tooltip placement="top">在职员工</el-tooltip>
            在职员工
          </span>
          <span v-else-if="scope.row.certificateType === 2">
            <el-tooltip placement="top">挂靠</el-tooltip>
            挂靠
          </span>
          <span v-else>
            <el-tooltip placement="top">非在职员工</el-tooltip>
            非在职员工
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        min-width="70"
        align="center"
        label="姓名">
      </el-table-column>
      <!-- <el-table-column
        prop="idCard"
        min-width="180"
        label="身份证号">
      </el-table-column> -->
      <el-table-column
        prop="mobile"
        align="center"
        min-width="110"
        label="手机号"
        :formatter="dateFormats"
        >
      </el-table-column>
       <el-table-column
        prop="idType"
        sortable='custom'
        align="center"
        min-width="120"
        label="证书类型">
      </el-table-column>
      <el-table-column
        prop="profession"
        min-width="170"
        align="center"
        sortable='custom'
        label="证书专业">
      </el-table-column>
      <el-table-column
        prop="certificateNo"
        min-width="170"
        align="center"
        sortable='custom'
        label="证书编号">
      </el-table-column>

     <el-table-column
        prop="expireFlag"
        min-width="100"
        align="center"
        label="证书预警"
        :formatter="dateFormats"
        >
        <template slot-scope="scope">
          <span v-if="scope.row.warningFlag === 1">
            <i class="font_family icon-tuoyuan1" style="color:#6EE976;"></i>
            {{scope.row.warningInfo}}
          </span>
          <span v-if="scope.row.warningFlag === 2">
            <i class="font_family icon-tuoyuan1" style="color:#E9D56E;"></i>
             {{scope.row.warningInfo}}
          </span>
          <span v-if="scope.row.warningFlag === 3">
            <i class="font_family icon-tuoyuan1" style="color:#E96E6E;"></i>
            {{scope.row.warningInfo}}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        prop="validityEndTime"
        min-width="120"
        align="center"
        sortable='custom'
        label="证书到期日期"
        :formatter="dateFormats"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    </div>

  </div>
    <information-mod @isDateEdit="isDateEdit" :srcListUpload="srcListUpload" :dataListForm="dataForm" v-else></information-mod>
  <!-- <div v-for="tableData"></div> -->
  </div>
</template>
<script>
import Vue from 'vue'
import merge from 'lodash/merge'
import { Button } from 'element-ui'
import informationMod from './information-mod'

export default {
  data () {
    return {
    isDataEdit:false,
    dataListLoading: false,
    labelPosition:'right',
    srcList:[],
    dataForm:{},
    dataList:[],
    srcListUpload:[],
    tableHeight:0,
    pageIndex: 1,
    pageSize: 20,
    totalPage: 0,
    orderBy:'validityEndTime',
    inOrder:'asc'
    }
  },
  props:{
    rowId:{
      type: Number,
      required: true
    }
  },
  created () {
     this.initJobs()
     this.getDataList()
    },
  mounted(){
  this.$nextTick(() => {
        this.tableHeight = window.innerHeight - this.$refs.dataForme.offsetHeight - 175;
        //后面的50：根据需求空出的高度，自行调整
    })
  },
  computed:{
    myHeader(){
      return {
        "token":Vue.cookie.get('token')
      }
    }
    },
    components: {
    informationMod
    },
  methods:{

handleClickItem(){
		this.$nextTick(()=>{
			// 获取遮罩层dom
			let domImageMask = document.querySelector(".el-image-viewer__mask");
			 if (!domImageMask) {
		 	  return;
		 	}
			domImageMask.addEventListener("click", () => {
			 	  // 点击遮罩层时调用关闭按钮的 click 事件
			  	 document.querySelector(".el-image-viewer__close").click();
			});
		})
	},
  isDateEdit(){
    // this.initJobs()
    this.isDataEdit = false
  },
    getSrcList(index){
      return this.srcList.slice(index).concat(this.srcList.slice(0,index))
    },
        dateFormats(row, column, cellValue, index){
      if (!Boolean(cellValue)) {
                return "-";
            } else {
                return cellValue;
            }
      },
    toggleEdit() {
        this.isDataEdit = true
    },
  gotoRouteHandle () {
    if(this.isEdited){
     this.$parent.routerBack()
    }else{
     this.$parent.routerBack()
    }
  this.$emit('rountHandle',false)
  },
     currentChangeHandle (val) {
     this.pageIndex = val
     this.getDataList()
   },
     sizeChangeHandle (val) {
     this.pageSize = val
     this.pageIndex = 1
     this.getDataList()
   },
    sort_change(column){
      // console.log(column);
      this.orderBy = column.prop
      // console.log(this.orderBy);
      if(column.order =='ascending'){
        this.inOrder = 'asc'
      }
      if(column.order =='descending'){
        this.inOrder = 'desc'
      }
      this.getDataList()
      },
  initJobs() {
        this.$http({
          url: this.$http.adornUrl('/project/projectConfig/info/'+this.rowId),
          method: 'get',
        }).then(({data}) => {
           if(data.code === 0){
            this.dataForm = data.data
            this.readonlyidid = true

            data.data.fileList.forEach(i=>{
              this.srcList.push(i.fileUrl)
              this.srcListUpload.push({name: i.fileName , url: i.remoteUrl + i.fileName})
            })

           }
        })
      },

/*           data: this.$http.adornData({
            'pageNum': this.pageIndex,
            'pageSize': this.pageSize,
            'orderBy': this.orderBy,
            'inOrder': this.inOrder,
            'conditions':this.params
          }) */


        getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/project/projectConfig/certificates/paging'),
          method: 'POST',
          data: this.$http.adornData({
	        'conditions': {
	        	'projectId': this.rowId
	        },
	        'orderBy': this.orderBy,
          'inOrder': this.inOrder,
	        'pageNum': this.pageIndex,
	        'pageSize': this.pageSize
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            // console.log(data)
            this.dataListLoading = false

            this.dataList = data.data.records
            this.totalPage = data.data.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
  renewalInfo() {
    if(this.types ==null){
    this.$http({
      url: this.$http.adornUrl('/certificate/certificateRenewalInfo/list/'),
      method: 'get',
      params: this.$http.adornParams({
                  'certificateId': this.visId.id,
                  'page':this.pageIndex,
                  'limit':this.pageSize
                  // 'status': this.flag? 'crash':''
                })
    }).then(({data}) => {
       if(data.code === 0){
        this.secondData = data.page.list
        this.secondMitId = data.page.list[0].id
        this.totalPage = data.page.totalPage
       }
    })
    }else{
      this.$http({
      url: this.$http.adornUrl('/certificate/certificateRenewalInfo/list/'),
      method: 'get',
      params: this.$http.adornParams({
                  'certificateId': this.visId.certificateId,
                  'page':this.pageIndex,
                  'limit':this.pageSize
                  // 'status': this.flag? 'crash':''
                })
    }).then(({data}) => {
       if(data.code === 0){
        this.secondData = data.page.list
        this.secondMitId = data.page.list[0].id
        this.totalPage = data.page.totalPage
       }
    })
    }
  }
}
}
</script>
<style lang="scss" scoped>
.div-images{
 width: 60px;
 height: 60px;
 float: left;
 margin-left: 15px;
}
.mod-detail{
  padding: 15px !important;
  background-color: #F5F7FA;
}
.mod-isisis{
  padding-right: 15px !important;
  padding-left: 15px !important;
  background-color: #ffffff;
}
.in-t{
  height: 56px;
  float: left;
  display: flex;
  align-items: center;
}
.in-ts{
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}
/deep/.tabs-s .el-tabs__active-bar{
  height: 2px !important;
}
/deep/.form-es{
  .fenghzuang{
    margin-bottom: 18px !important;
  }
}

/deep/.tabs-s{
  .el-tabs__header{
    .el-tabs__nav-wrap{
     .el-tabs__nav-scroll{
      .el-tabs__nav{
        .el-tabs__item{
          border: none !important;
          background-color: #ffffff !important;
          // padding-left: 0px !important;

        }
      }
     }
    }
  }
}
.table-is{
  padding-left: 15px !important;
  padding-right: 15px !important;
  padding-bottom: 15px !important;
  background-color: #ffffff;
}
.title-a{
  width: 100%;
  height: 56px;
  padding-right: 10px;
  background-color: #ffffff;
  // margin-left: 3%;
  // margin-right: 3%;
  // border-bottom:1px solid #EBEEF5;
  // line-height: 56px;
  .zuofei{
    width: 40%;
    height: 56px;
    font-size: 16px;
    color: #303133;
    font-weight: 700;
    float: left;
    display: flex;
    align-items: center;
    margin-left: 25px;
  }
  .fanhui{
    // width: 10%;
    height: 56px;
    font-size: 14px;
    // color: #409EFF;
    float: right;
    display: flex;
    align-items: center;
    // padding-right: 30px;
    span{
      float: right;
      // margin-right: 20px;
    }

  }
}
/deep/
.el-dialog__header{
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
.el-dialog__title{
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 20px !important;
}
}
.font_family{
font-size: 15px !important;
}
.shouhuishijian{
  margin-top: 8px;
}
.queryFormList{
  .el-form-item {
    margin-bottom: 0px !important;
}
}
.button-see{
  font-size: 14px;
}
.div-button{
  width: 100%;
  height: 35px;
  // margin-bottom: 30px;
  // float: right;
  .button-jie{
    float: right;
    margin-left: 10px;
    // margin-right: 10px;
  }
  .button-shou{
    float: right;
    margin-right: 10px;
    margin-left: 10px;
  }

  .button-gui{
    float: right;
    // margin-right: 10px;
    margin-left: 10px;
  }
  .button-gua{
    float: right;
    margin-left: 10px;
  }
  .button-yanqi{
    float: right;
    margin-left: 10px;
    // margin-right: 10px;
  }
  .button-guaru{
    float: right;
    // margin-right: 10px;
  }
}
  .hander-s{
    width: 100%;
    height: 56px;
    color: #303133;
    overflow: hidden;
    h3{
      float: left;
      font-size: 16px;
      margin: 0px !important;
      padding: 0px !important;
    }
    padding-left: 10px;
    font-size: 14px;
    font-weight: 400;
    i{
      color: #F2F6FC;
      margin-left: 5px;
      margin-right: 5px;
    }
    .anniu{
      height: 56px;
      float: right;
      display: flex;
      align-items: center;
    }
  }
  // .queryForm{
  //   text-align: center;
  // }
  .form-div{
    margin-left: 10px;
  }
/deep/.mod-detail{
  .dialogForm{
    .el-dialog{
      margin-top: 5vh !important;
    }
  }
}
/deep/.dialogForm{
  .el-form-item__label{
    width: 90px !important;
  }
  .form-s{
    .el-form-item__label{
    width: 110px !important;
   }
  }
  .upload-s{
    margin-left: 20px;
  }
  .el-form-item__content{
    margin-left: 90px !important;
  }
}
  .table-s{
    margin-top: 10px;
    padding-left: 10px;
    width: 100%;
  }
  .tab-pane{
    float: left;
  }
  .anniu-s{
    float: right;
    margin-right: 15px;
  }
</style>

